<route lang="jsonc" type="page">
    {
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "我的雪具"
		}
    }
</route>
<template>
	<view class="snowboard-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
		<header-navbar title="我的雪具" />
		<template v-if="snowboardArr.length > 0">
			<view
				v-for="(item, index) in snowboardArr"
				:key="index"
				:class="['card-item', { active: orderStore.orderInfo.eq_id === item.id && urlParams.select }]"
				@click="handleDetails(item)"
			>
				<view class="cell-item border">
					<view class="cell-item_center">{{ item.name }}</view>
				</view>
				
				<view class="snowboar-content">
					<view
						class="flex-between"
					>
						<view class="label">品牌</view>
						<view class="value">{{ item.brandTable?.name || item.brandUserTable?.name }}</view>
					</view>
					<view
						class="flex-between"
					>
						<view class="label">系列</view>
						<view class="have_num">{{ item.seriesTable?.name || item.seriesUserTable?.name }}</view>
					</view>
					<!-- <view
						class="flex-between"
					>
						<view class="label">型号</view>
						<view class="have_num">{{ item.model }}</view>
					</view> -->
					<view
						class="flex-between"
					>
						<view class="label">单板/双板</view>
						<view class="have_num">{{ item.type === '0' ? '单板' : '双板' }}</view>
					</view>
				</view>
			</view>
		</template>
		<wd-status-tip v-else image="content" tip="暂无雪具" />
		
		<view class="fixed-btn" :style="{ paddingBottom: safeAreaInsets?.bottom > 0 ? `${safeAreaInsets?.bottom}px` : null }">
			<view class="btn-add" @click="handleAdd">添加雪具</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import HeaderNavbar from '@/pages/components/header-navbar.vue';
	import { useSafeAreaInsets } from '@/mixins/basic'
	import { onMounted, ref } from 'vue';
	import { getSnowboardList } from '@/api/snowboard'
	import { onLoad } from '@dcloudio/uni-app';
	import { useOrder } from '@/store/order'

	defineOptions({
		name: 'Snowboard',
	})
	const { safeAreaInsets } = useSafeAreaInsets()
	const orderStore = useOrder()

	const snowboardArr = ref([])
	const urlParams = ref<Record<string, any>>({})
	
	onLoad((opts) => {
		urlParams.value = opts
	})
	
	onShow(() => {
		initData()
		// uni.$on('refreshIfNeeded', function (dat) {
		//     console.log('监听到事件来自 refreshIfNeeded ，携带参数为：' + dat)
		//     initData()
		//     uni.$off('refreshIfNeeded')
		// })
	})
	onBackPress(() => {
		console.log('onBackPress---1111')
		initData()
	})
	
	function initData() {
		getSnowboardList({
			timestamp: new Date().getTime()
		}).then(res => {
			snowboardArr.value = [
				...res.my_eq,
				...res.my_ueq
			]
		})
	}
	function handleAdd() {
		uni.navigateTo({
			url: '/pages-sub/snowboard/add'
		})
	}
	
	function handleDetails(item) {
		// 订单选择雪具
		if (urlParams.value.select) {
			orderStore.setOrderInfo({
				eq_id: item.id,
				eq_name: item.name
			})

			uni.navigateBack()
		}
		// uni.navigateTo({
		// 	url: '/pages-sub/snowboard/add',
		// 	success: () => {
		// 		// 通过eventChannel向被打开页面传送数据
		// 		uni.$emit('snowboardData', item)
		// 	}
		// })
	}
</script>

<style lang="scss" scoped>
	.snowboard-page {
		padding: 50px 26px 98px 26px;
		
		.card-item {
			&.active {
				border: 1px solid $uni-main-color;
			}
			.snowboar-content {
				padding: 15px 16px;
				> .flex-between {
					font-size: 16px;
					font-weight: 500;
					line-height: 20px;
					
					& + .flex-between {
						padding-top: 15px;
					}
				
					.label {
						color: #989898;
					}
					
					.value {
						color: #23282C;
					}
				}
			}
		}
		
		.fixed-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FCFEFF;
			padding: 0 26px 26px 26px;
			.btn-add {
				background-color: $uni-main-color;
				padding: 8px 0;
				border-radius: 8px;
				text-align: center;
				color: #fff;
				font-size: 18px;
				font-weight: 600;
				line-height: 24px;
				&:active {
					background-color: rgba($uni-main-color, 0.9)
				}
			}
		}
	}
</style>